<style lang="less">
    @import '../../../styles/common.less';
    @import './image-editor.less';
</style>

<template>
    <label>
        <Button type="primary" @click="modal1 = true">选择图片</Button>
        <Modal v-model="modal1" title="选择并裁剪图片" @on-ok="ok" @on-cancel="cancel">
            <Row :gutter="10" class="image-editor">
                <Col span="14" class="image-editor-con1">
                    <div class="cropper">
                        <img id="cropimg1" alt="">
                    </div>
                </Col>
                <Col span="10" class="image-editor-con1">
                    <Row type="flex" justify="center" align="middle" class="image-editor-con1-preview-con">
                        <div id="preview1"></div>
                    </Row>
                    <div class="image-editor-con1-btn-con margin-top-10">
                        <input type="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="handleChange1" id="fileinput1" class="fileinput" />
                        <label class="filelabel" for="fileinput1"><Icon type="image"></Icon>&nbsp;选择图片</label>
                    </div>
                </Col>
            </Row>
        </Modal>
    </label>
</template>

<script>
import Cropper from 'cropperjs';
import './cropper.min.css';
export default {
    name: 'ImageEditor',
    props: {
        value: {
            type: Object
        }
    },
    data () {
        return {
            modal1: false
        };
    },
    methods: {
        handleChange1 (e) {
            let file = e.target.files[0];
            let reader = new FileReader();
            reader.onload = () => {
                this.cropper1.replace(reader.result);
                reader.onload = null;
            };
            reader.readAsDataURL(file);
        },
        handlecrop1 () {
            let file = this.cropper1.getCroppedCanvas().toDataURL();
            this.value.dataUrl = file;
        },
        ok () {
            this.handlecrop1();
            this.$Message.info('Clicked ok');
        },
        cancel () {
            this.$Message.info('Clicked cancel');
        }
    },
    mounted () {
        let img1 = document.getElementById('cropimg1');
        this.cropper1 = new Cropper(img1, {
            dragMode: 'move',
            preview: '#preview1',
            restore: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            toggleDragModeOnDblclick: false
        });
    }
};
</script>

<style>

</style>
